<template>
  <h1>轮播图列表</h1>
  <el-table :data="bannerList" style="width: 100%">
    <el-table-column prop="bannerid" label="轮播图编号" width="180" />
    <el-table-column label="图片" width="180">
      <template #default="scope">
        <img class="img" :src="scope.row.img" />
      </template>
    </el-table-column>
    <el-table-column prop="alt" label="图片提示" width="180" />
    <el-table-column prop="link" label="图片连接" width="180" />
    <!-- 看是否为1就是启用了 -->
    <el-table-column label="是否启用" width="180" v-if="crud.charAt(2)==='1'">
      <template #default="scope">
        <el-switch
          v-model="scope.row.flag"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          @change="(val:boolean)=>updateBannerFlag(scope.row.bannerid,val)"
        />
      </template>
    </el-table-column>
    <el-table-column  label="是否删除" width="100" v-if="crud.charAt(3)==='1'">
      <template #default="scope">
    <el-button type="primary"  @click="del(scope.row.bannerid)">删除</el-button>
  </template>
    </el-table-column>
    
  </el-table>
  <!-- <el-pagination
    :page-size="20"
    :pager-count="11"
    layout="prev, pager, next"
    :total="1000"
    @current-change="changePage"
  /> -->
  <input  type="button" value="<"/>
  <button class="empty" v-show="bannerList.length!=0"  @click="fn()">一键清空</button>
        <input  type="button" value=">"/>
  <!-- <div class="empty" v-show="bannerList.length==0">列表为空</div> -->
</template>

<script setup lang="ts">
import {ElNotification}  from 'element-plus'
import "element-plus/es/components/notification/style/css"
import { reactive } from "vue";
import { admin_banner_list, admin_banner_updateFlag,admin_banner_delete,admin_banner_removeAll } from "../../../utils/api";
import {useRoute} from "vue-router";
const $router = useRoute();
const crud:string = ($router.meta.crud as string);
interface IBanner {
  link: string;
  img: string;
  alt: string;
  bannerid: string;
  flag: boolean;
}
// 1、定义轮播图数据
let bannerList = reactive<IBanner[]>([]);
// 2、获取所有的轮播图数据
const bb = ()=>{
admin_banner_list({}).then((res: any) => {
  if (res.data.code === "200") {
    bannerList.length = 0

    bannerList.push(...res.data.data);
  }
})
}
bb()
// 3.更新轮播图的访问状态
const updateBannerFlag = (bannerid: string, val: boolean) => {
  admin_banner_updateFlag({
    bannerid: bannerid,
    flag: val,
  }).then((res: any) => {
    if (res.data.code === "200") {
      ElNotification({
        title:"提示",
        message: "更新成功",
        type: "success",
    })
    }
  });
};
// 4.删除轮播图数据
const del =(bannerid:string)=>{
  admin_banner_delete({bannerid}).then((res:any) => {
    console.log(bannerid);
    // admin_banner_list()
  if (res.data.code === "200") {
    ElNotification({
        title:"提示",
        message: "删除成功",
        type: "success",
    })
    // $router.go(0)
    bb()
  }
  })
}
// 5.删除轮播图全部的数据
const fn = ()=>{
  admin_banner_removeAll({}).then((res: any) => {
  if (res.data.code === "200") {
    ElNotification({
        title:"提示",
        message: "删除全部成功",
        type: "success",
    })
    // $router.go(0)
    bb()
  }
});
}
// const changePage=(value:number)=>{
//     // console.log("value",value);
//     params.count = value;
//     getgoods();
// }
</script>

<style scoped>
.img {
  width: 50%;
  height: 50%;
}
.empty{
            margin:50px;
            color: red;
            text-align: center;
            width: 300px;
            height: 80px;
            border-radius: 15px;
          background-color: hotpink;
        }
</style>
